<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>订单支付 - 童书商城</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/payment.css">
</head>
<body>
    <!-- 公共头部 -->
    <div id="commonHeader"></div>

    <!-- 主体内容 -->
    <div class="payment-page">
        <div class="payment-header">
            <h2>订单支付</h2>
        </div>

        <!-- 订单信息 -->
        <div class="order-info-section">
            <div class="section-header">
                <h3>订单信息</h3>
            </div>
            <div class="order-info">
                <div class="info-item">
                    <span class="label">订单号：</span>
                    <span class="value" id="orderNumber">--</span>
                </div>
                <div class="info-item">
                    <span class="label">订单金额：</span>
                    <span class="value price" id="orderAmount">¥0.00</span>
                </div>
                <div class="info-item">
                    <span class="label">订单状态：</span>
                    <span class="value status" id="orderStatus">待支付</span>
                </div>
                <div class="info-item">
                    <span class="label">支付倒计时：</span>
                    <span class="value countdown" id="countdown">00:30:00</span>
                </div>
            </div>
        </div>

        <!-- 支付方式 -->
        <div class="payment-method-section">
            <div class="section-header">
                <h3>选择支付方式</h3>
            </div>
            <div class="payment-methods">
                <div class="payment-option active" data-method="ALIPAY">
                    <div class="payment-icon alipay-icon"></div>
                    <span>支付宝</span>
                    <i class="layui-icon layui-icon-ok"></i>
                </div>
                <div class="payment-option" data-method="WECHAT">
                    <div class="payment-icon wechat-icon"></div>
                    <span>微信支付</span>
                    <i class="layui-icon layui-icon-ok"></i>
                </div>
                <div class="payment-option" data-method="BANK">
                    <div class="payment-icon bank-icon"></div>
                    <span>银行卡支付</span>
                    <i class="layui-icon layui-icon-ok"></i>
                </div>
            </div>
        </div>

        <!-- 支付二维码 -->
        <div class="payment-qrcode">
            <div class="qrcode-container">
                <img src="./img/qrcode-demo.png" alt="支付二维码" id="qrcodeImg">
                <p>请使用<span id="paymentMethodText">支付宝</span>扫码完成支付</p>
                <p class="qrcode-tip">二维码有效期为2小时，请尽快支付</p>
            </div>
        </div>

        <!-- 订单商品 -->
        <div class="order-items-section">
            <div class="section-header">
                <h3>订单商品</h3>
            </div>
            <div class="order-items" id="orderItems">
                <!-- 订单商品将通过JavaScript动态生成 -->
                <div class="order-items-header">
                    <span class="item-image">商品图片</span>
                    <span class="item-name">商品名称</span>
                    <span class="item-price">单价</span>
                    <span class="item-quantity">数量</span>
                    <span class="item-total">小计</span>
                </div>
                <div class="order-items-list">
                    <!-- 这里将通过JavaScript动态插入商品列表 -->
                </div>
                <div class="order-items-footer">
                    <div class="order-summary">
                        <div class="summary-item">
                            <span>商品总数：</span>
                            <span id="totalQuantity">0</span>
                        </div>
                        <div class="summary-item">
                            <span>商品总价：</span>
                            <span id="totalPrice">¥0.00</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
            <button class="cancel-btn">取消支付</button>
            <button class="pay-btn">立即支付</button>
        </div>
    </div>

    <!-- JavaScript 引入 -->
    <script src="./layui/layui.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/header.js"></script>
    <script src="./js/api.js"></script>
    <script src="./js/auth.js"></script>
    <script src="./js/payment.js"></script>
</body>
</html>